<script setup>
import { reactive, toRefs } from "vue";
import MyDatails from "../../components/MyDatails.vue";
import MyRecommendCourse from "../../components/MyRecommendCourse.vue";
import { geCollectListAPi } from "../../http/http";
// 数据类型
const data = reactive({
  CollectList: [],
});
// 收藏数据
const FnCollectListAPi = async () => {
  let res = await geCollectListAPi();
  console.log(res);
  data.CollectList = res.data.list;
};
FnCollectListAPi();

const { CollectList } = toRefs(data);
</script>
<template>
  <!-- 我的收藏 -->
  <div class="Mycollection">
    <!-- 头部 -->
    <MyDatails>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back" />
      </template>
      <template #text>
        <h3>我的收藏</h3>
      </template>
    </MyDatails>
    <!-- 列表 -->
    <van-empty description="描述文字" v-show="CollectList.length < 0" />
    <MyRecommendCourse :RecommendCourseList="CollectList"></MyRecommendCourse>
  </div>
</template>

<style lang="scss" scoped>
.Mycollection {
  width: 750px;
}
</style>
